/* 列表页制作画布
 * @Author: duanguang 
 * @Date: 2020-01-16 15:06:01 
 * @Last Modified by: duanguang
 * @Last Modified time: 2020-10-30 18:50:32
 */
import React,{ Component } from 'react';
import { LegionsProPageContainer,LegionsProForm,LegionsProModal,LegionsProDragger,LegionsProTable,LegionsProConditions } from 'legions-pro-design';
import { OpenConfirm } from 'legions-lunar/antd-toolkit';
import {
    Row,
    Icon,
    Dropdown,
    Menu,
    message,
    Button,
} from 'antd';
import { InstanceProForm } from 'legions-pro-design/es/LegionsProForm/interface';
import { InstanceProModal } from 'legions-pro-design/es/LegionsProModal/interface';
import { InstanceProTable } from 'legions-pro-design/es/LegionsProTable/interface';
import { IProConditions } from 'legions-pro-design/es/LegionsProConditions/ProConditionsUtils';
import { bind,observer } from 'legions/store-react'
import ProjectStore from '../../stores/projectStore';
import classNames from 'classnames';

import TableProperty from '../components.property/tableProperty';
import {
    PropertyColumnsConfigFormFields,
    PropertyTableDataSourceFormFields,
    PropertyTableBaseConfigFormFields,
    PropertyTableOperationFormFields,
} from '../../models/form/propertyFormModel';
import { observable,action,computed,runInAction } from 'mobx';
import {  ResponseVModelNameDataEntity } from '../../models/pageListEntity';
import { OPREATION_VIEW } from '../../constants/consts';

import { ContextStore } from '../../../common/components/contextStore/contextStore';
import { fullProvider,lazyInject } from 'legions-control-container';
import { QueryTemplateConfig } from '../../constants/template/query';
import { QueryParmsPropertyModal } from '../canvas.list/queryParamsProperty';
import { OperationAreaPropertyModal } from '../canvas.list/operationProperty';
import { TableListViewDomain } from '../../services/components/tableListViewDomain';
import { TableListContainer } from '../canvas.list/listContainer';

interface IProps {
    store?: ProjectStore;
    onQueryPropertyClick:(value: { uid: string;name:string})=>void
}
type IQuery = Array<IProConditions['componentModel']>
@bind({ store: ProjectStore })
@observer
export default class TableListViewCanvas extends Component<IProps,{}> {
    viewProperty: Array<IProConditions['componentModel']> = null
    @lazyInject(QueryTemplateConfig)
    public queryTemplate!: QueryTemplateConfig;
    @lazyInject(TableListViewDomain)
    tableListViewDomain!: TableListViewDomain
    constructor(props: IProps) {
        super(props)
        this.state = {

        }
    }

    // tslint:disable-next-line: typedef
    componentDidCatch(error: Error,_errorInfo) {
        console.log(error,'error')
    }
    
    

    
    
    handleTableProperyCancel = () => {
        const TablePropertyApp = this.props.store.context.listPagePropertyApp.context.TablePropertyApp;
        TablePropertyApp.tablePropertyDrawerModalRef.viewModel.visible = false;
    }

    handleTableProperyOk = () => {
        const formValue: { error: Boolean; value: Object; key: string }[] = [];
        const DataSourceRefKey = 'DataSourceRef';
        const BaseConfigRefKey = 'BaseConfigRef';
        const updateFormValue = (key: string,error: boolean,value: Object) => {
            const item = formValue.find((entity) => entity.key === key);
            if (item) {
                item.value = value;
                item.error = error;
            }
            else {
                formValue.push({ error,value,key })
            }
        }
        this.props.store.formProperyDataSourceRef && this.props.store.formProperyDataSourceRef.viewModel.form.validateFields((err,values: PropertyTableDataSourceFormFields) => {
            const value = PropertyTableDataSourceFormFields.formFieldsToData(PropertyTableDataSourceFormFields,this.props.store.formProperyDataSourceRef.viewModel.InputDataModel)
            if (!err) {
                updateFormValue(DataSourceRefKey,false,value)

            } else {
                updateFormValue(DataSourceRefKey,true,value)
            }
        })
        this.props.store.formProperyBaseConfigRef && this.props.store.formProperyBaseConfigRef.viewModel.form.validateFields((err,values: PropertyTableBaseConfigFormFields) => {
            const value = PropertyTableBaseConfigFormFields.formFieldsToData(PropertyTableBaseConfigFormFields,this.props.store.formProperyBaseConfigRef.viewModel.InputDataModel)
            if (!err) {
                updateFormValue(BaseConfigRefKey,false,value)
            } else {
                updateFormValue(BaseConfigRefKey,true,value)
            }
        })
        const result = formValue.every((item) => !item.error)
        if (result && formValue.length) {
            const TablePropertyApp = this.props.store.context.listPagePropertyApp.context.TablePropertyApp;
            runInAction(() => {
                // @ts-ignore
                TablePropertyApp.viewModel.tableDataSourceCode = formValue.find((item) => item.key === DataSourceRefKey).value;
                // @ts-ignore
                TablePropertyApp.viewModel.tableBaseConfigCode = formValue.find((item) => item.key === BaseConfigRefKey).value
            })
            message.success('表格基础配置和数据源配置设置成功')
            console.log(TablePropertyApp.viewModel.tableDataSourceCode);
            TablePropertyApp.tablePropertyDrawerModalRef.viewModel.visible = false;
        }
    }
    render() {
        const QueryPropertyApp = this.props.store.context.listPagePropertyApp.context.QueryPropertyApp;
        const TablePropertyApp = this.props.store.context.listPagePropertyApp.context.TablePropertyApp;
        return (
            <React.Fragment>
                <TableListContainer onQueryPropertyClick={this.props.onQueryPropertyClick}></TableListContainer>
                <QueryParmsPropertyModal></QueryParmsPropertyModal>
                <OperationAreaPropertyModal></OperationAreaPropertyModal>
                {/*  表格组件属性配置start======= */}
                <LegionsProModal
                    maskClosable={false}
                    onCancel={this.handleTableProperyCancel}
                    onOk={this.handleTableProperyOk}
                    modalType="drawer"
                    placement="right"
                    onReady={(value) => {
                        TablePropertyApp.tablePropertyDrawerModalRef = value;
                        const width = 400;
                        TablePropertyApp.tablePropertyDrawerModalRef.viewModel.width = width;
                    }}>
                    <TableProperty></TableProperty>
                </LegionsProModal>
                {/*  表格组件属性配置end======= */}
            </React.Fragment>
        )
    }
}